export default function (id, data) {
    console.log(data)
    console.log("IN Nested Display with " + JSON.stringify(data))
    return `<div id="${id}" style="padding: 0 0.267rem;background: white;">` + style + buildRecord(id + '-top', null, data) + `</div>`;
}

function buildRecord(uid, no, record) {
    let id = uid + (no != null ? no : '')
    let result = ''
    if (uid !== id) {
        // result = '<div style="overflow: hidden;margin-bottom: 0.133rem">&nbsp;</div>'
    }
    let buttonGroup = '';
    if (record.editPath) {
        buttonGroup += buildButton(id + "-edit", "edit", record.editPath);
    }
    if (record.deletePath) {
        buttonGroup += buildButton(id + "-delete", "delete", record.deletePath);
    }
    if (record.insertBelowPath) {
        buttonGroup += buildButton(id + "-insert", "add", record.insertBelowPath);
    }
    if (buttonGroup) {
        result += `<div class="buttonGroup" style="width: 100%;overflow: hidden">${buttonGroup}</div>`
    }
    if (record.fields && uid !== id) {
        result += `<div class="labels" style="color: white">${no != null ? no + 1 : ''}</div>`
    }
    let results = '';
    if (record.fields) {
        record.fields.forEach(i => {
            if (!i.list) {
                results += buildValue(i.name, i.value, i.type)
            } else {
                results += '<div class="aaa">' + buildList(id + "dt", i.name, i.list) + '</div>'
            }
        });
    }
    results = `<div class="showWrap">${results}</div>`;
    result += results;
    if (uid !== id) {
        result = `<div class="resultWrap">${result}</div>`
    } else {
        result = `<div class="fatherWrap" style="margin-top: 0.267rem">${result}</div>`
    }
    console.log("record built: " + result)
    return result;
}

function buildList(id, label, list) {

    let result = '';

    if (list.insertAtTopPath) {
        // result += `<div style="font-size: 0.4rem;height: 0.8rem;line-height: 0.8rem">${label}&nbsp; &nbsp; &nbsp;` + buildButton(id + '-insertAtTop', "addAtHead", list.insertAtTopPath) + '</div>'
        result += `<div id="insertAtTop" style="width: 1.5rem;height: 0.633rem;line-height: 0.633rem;text-align: center;font-size: 0.213rem;color: white;background: #008be6;margin-bottom: 0.4rem">添加${label}</div>`
        window.nbasics.differAction(() => {
            let insertAtTop = document.getElementById('insertAtTop');
            insertAtTop.onclick = () => {
                window.nbasics.touchBack({path: list.insertAtTopPath})
            }
        });
    }
    if (list.elements) {
        list.elements.forEach((item, k) => result += buildRecord(id, k, item))
    }
    return result
}

function buildValue(label, value, type) {
    let inputString = ``;
    let alingTop = false;
    switch (type) {
        case 'BOOLEAN':
            // <span style="font-size: 0.4rem">是</span><input type="radio" class="show-text" name="${label}" value="${label}" ${value==='true'?'checked':''} disabled="disabled" style="height: 0.273rem;margin: 0 0.133rem"/><span style="font-size: 0.4rem">否</span><input type="radio"  name="${label}" value="${label}" disabled="disabled" ${value==='false'?'checked':''} style="margin: 0 0.133rem;height: 0.273rem"/>
            inputString = `<input type="text" class="show-text stringInput"  name="${label}" value="${value === "true" ? '是' : '否'}" disabled="disabled">`;
            break;
        case 'TEXT':
            inputString = `<span class="show-text"  style="width: 5.5rem;background: white;font-size: 0.4rem;border: none;height: auto">${value ? value : ''}</span>`;
            alingTop = true;
            break;
        default:
            inputString = `<input type="text" class="show-text stringInput"  name="${label}" value="${value ? value : ''}" disabled="disabled">`;
    }
    let valueResult = (label ? `<span class="show-label" style="vertical-align: ${alingTop ? 'top' : 'auto'}">${label}<span>:</span></span>` : "Unnamed")
        + `<span class="show-text" >${inputString}</span>`;
    valueResult = `<div class="valueWrap">${valueResult}</div>`;
    return valueResult;
}

function buildButton(id, clazz, path) {
    window.nbasics.differAction(() => {
        console.log(id)
        document.getElementById(id).onclick = () => {
            window.nbasics.touchBack({path: path})
        }
    });
    let imgString = '';
    if (clazz === 'edit') {
        imgString = '/Direct/com.nebutown.workflow.root.Root/commonui/assets/editPen.png'
    } else if (clazz === 'add') {
        imgString = '/Direct/com.nebutown.workflow.root.Root/commonui/assets/addPen.png'
    } else if (clazz === 'delete') {
        imgString = '/Direct/com.nebutown.workflow.root.Root/commonui/assets/deletePen.png'
    }
    // return `<div id="${id}" class="${clazz}"></div>`
    return `<span id="${id}" style="width: 0.667rem;display:inline-block;height: 0.667rem;border: 0.027rem solid black;border-radius: 1.333rem;float: right;margin-right: 0.067rem;padding: 0.04rem;background: url(${imgString}) center no-repeat;background-size: 80% 80%"></span>`

}

let style = `
                <style>
                    body{
                    background: white;
                    }
                    .show-text{
                    display: inline-block;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    }
                    .stringInput{
                     border: none;
                     background: white;
                     box-sizing: border-box;
                     padding-left: 0.107rem;  
                     height: 0.8rem;
                     width: 5.667rem;
                     font-size: 0.4rem;
                     line-height: 0.8rem;
                    }
                    .valueWrap{
                     line-height: 0.8rem;
                     margin-bottom: 0.04rem;
                    }
                    .resultWrap{
                     padding-top: 0.067rem;
                     width: 100%;
                     position: relative;
                     box-shadow: #666 0 0 0.053rem;
                     box-sizing: border-box;
                     border-radius: 0.2rem;
                     margin-bottom: 0.533rem;
                     border-top-left-radius: 0rem;
                     padding: 0.267rem;
                    }
                    .labels{
                     /*margin-top: 0.22rem;*/
                     /*font-size: 0.4rem;*/
                     position: absolute;
                     width: 0.5rem;
                     height: 0.7rem;
                     top: -0.067rem;
                     left: 0.267rem;
                     font-size: 0.32rem;
                     text-align: center;
                     line-height: 0.667rem;
                     background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/biaoqian@2x.png");
                     background-size: 100% 100%;
                    }
                   .show-label{
                     display: inline-block;
                     width: 1.8rem;
                     height: 0.8rem;
                     font-size: 0.4rem;
                     margin-right: 0.133rem;
                   }
                   .add{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top: 0.25rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%;
                    float: right;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                   .addAtHead{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top: 0.25rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%;
                    float: left;
                    font-size: 0.133rem;
                    margin-right: 0.08rem;
                   }
                   .showWrap{
                    font-size: 0.267rem;
                    margin-left: 0.133rem;
                   }
                   .delete{
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top: 0.25rem;
                    float: right;
                    font-size: 0.133rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/icondelete@2x.png");
                    background-size: 100%;
                    margin-right: 0.08rem;
                   }
                   .edit{
                    width: 0.4rem;
                    height: 0.4rem;
                    float: right;
                    margin-top: 0.25rem;
                    font-size: 0.133rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/iconedit@2x.png");
                    background-size: 100%;
                    margin-right: 0.08rem;
                   }
                   .itemWrap{
                    float: left;
                    width: 95%;
                    border: 0.013rem solid #999;
                    overflow: hidden;
                   }
                   .itemString{
                    width: 100%;
                   }
                   .insertBelow{
                    width: 0.2rem;
                    height: 0.2rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/diagram@2x.png");
                    background-size: 100%;
                    float: left;
                    font-size: 0.133rem;
                   }
                   .addAtHead{
                    width: 0.2rem;
                    height: 0.2rem;
                    background: url("/Direct/com.nebutown.workflow.root.Root/commonui/assets/numberincrease@2x.png");
                    background-size: 100%; 
                    float: left;
                    font-size: 0.133rem;
                   }
                </style>
    `
